<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="巴杀id">{{data.basaId}}</a-descriptions-item>
            <a-descriptions-item label="巴杀设备名字">{{data.basaName}}</a-descriptions-item>
            <a-descriptions-item label="数据更新时间">{{basaRealtimeData.updateTime}}</a-descriptions-item>
            <a-descriptions-item label="关联4G设备">ID：{{data.recordId}} / IMEI：{{data.basaImei}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-card>
                <a-statistic
                  title="水温"
                  :value="basaRealtimeData.waterTemperature"
                  :precision="1"
                  suffix="℃"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="12" >
              <a-card>
                <a-statistic
                  title="剩余执行时间"
                  :value="basaRealtimeData.remainTime"
                  :precision="0"
                  suffix="分钟"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col :span="24">
              <a-card>
                <a-statistic
                  title="profile"
                  :value="basaRealtimeData.profile"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1326' }"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {BasaRealtimeApi} from "@/api/property/basa/BasaRealtimeApi";

export default {
  name: 'DeviceManagerdeviceBasaRealtimedataStateMonitor',
  components: {
  },
  props: {
    data: Object
  },
  data() {
    return {
      loadRealtimeDataTimer : null,
      basaRealtimeData : {},
    };
  },
  mounted() {
    this.getRealtimeData();
    this.loadRealtimeDataTimer = setInterval(this.getRealtimeData, 30000);


  },
  beforeUnmount() {
    clearInterval(this.loadRealtimeDataTimer);
  },
  methods: {
    getRealtimeData() {
      let that = this;
      BasaRealtimeApi.detail({"basaId" : that.data.basaId}).then(result => {
        let formatResult = result || {};
        let profile = '未知';
        if (formatResult.workStatus == 0) {
          profile = "none";
        } else if (formatResult.workStatus == 1) {
          profile = "profile1";
        } else if (formatResult.workStatus == 2) {
          profile = "profile2";
        } else if (formatResult.workStatus == 163) {
          profile = "profile3,ramp";
        } else if (formatResult.workStatus == 179) {
          profile = "profile3,Frozen";
        } else if (formatResult.workStatus == 195) {
          profile = "profile3,Refrigerator";
        } else if (formatResult.workStatus == 211) {
          profile = "profile3,room temperature";
        } else if (formatResult.workStatus == 4) {
          profile =  "profile4";
        }
        formatResult.profile = profile;
        that.basaRealtimeData = formatResult;
      });
    },
  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
